<template>
  <div id="content">
    <div class="con-body">
      <div class="con-by-right-slide">
        <div class="con-by-right">
          <div class="tit">
            <div class="tit-excellent">
              <p>
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_1276_14103)">
                    <path
                        d="M9 11.1262C11.8995 11.1262 14.25 8.90659 14.25 6.16856C14.25 3.43054 11.8995 1.21094 9 1.21094C6.10051 1.21094 3.75 3.43054 3.75 6.16856C3.75 8.90659 6.10051 11.1262 9 11.1262Z"
                        stroke="#6777EF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M6.1575 10.3391L5.25 16.7911L9 14.6664L12.75 16.7911L11.8425 10.332" stroke="#6777EF"
                          stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                  </g>
                  <defs>
                    <clipPath id="clip0_1276_14103">
                      <rect width="18" height="16.9976" fill="white" transform="translate(0 0.501953)"/>
                    </clipPath>
                  </defs>
                </svg>
              </p>
              <p>优秀作者榜</p>
            </div>
          </div>
          <div class="int-author">
            <div class="int-aut-body" v-for="(item,i) in authorData">
              <div class="int-author-portrait">
                <p>{{ item.portrait }}</p>
              </div>
              <div class="int-author-right">
                <p>{{ item.username }}</p>
                <p><span>{{ item.grade }}</span><span>{{ item.introduce }}方向</span></p>
              </div>

            </div>
          </div>
        </div>
      </div>
      <div class="con-by-left">
        <div>
          <div class="by-left-tit">
            <h1>{{ coTitle }}</h1>
          </div>
          <div class="by-left-release">
            <div class="rel-left">
              <div class="int-author-portrait">
                {{coPortrait}}
              </div>
              <div class="rel-aut-body">
                <p>{{ coUsername }}</p>
                <p><span>{{coGrade}}级</span><span>{{ coIntroduce }}</span></p>
              </div>
            </div>
            <div class="rel-rigth">
              <p><span>{{ coTimes }}</span></p>
              <p>阅读<span>{{ coBrowse }}</span></p>
            </div>
          </div>
          <div class="by-left-content" v-html="coBody"></div>
        </div>
        <div class="by-left-classify">
          <p>分类:</p>
          <div class="class-box" v-for="item in coLabel">
            <p><span>#{{item.label}}</span></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {defineComponent, getCurrentInstance, ref} from 'vue'
import router from "../../router";
import $store from "@/store"
import {message} from "ant-design-vue";

export default defineComponent({
  name: "weeklyContent",
  setup() {
    let {proxy} = getCurrentInstance();
    //优秀作者数据存放
    const authorData = ref([]);
    let first_author = [];
    let second_author = [];
    //优秀作者展示
    proxy.$request('get', '/api/v1/user/weekly/author', {}).then(res => {
      authorData.value = res.data
      for (let i = 0; i < res.data.length; i++) {
        first_author.push(res.data[i].username);
        if (res.data[i].username.length >= 6) {
          res.data[i].username = res.data[i].username.slice(2, 5)
        } else if (res.data[i].username.length < 6) {
          res.data[i].username = res.data[i].username.slice(2, 4)
        }

        if (res.data[i].username.length == 3) {
          res.data[i].portrait = res.data[i].username.slice(1, 3)
        } else if (res.data[i].username.length == 2) {
          res.data[i].portrait = res.data[i].username
        }
      }
      console.log(res.data)
    });

    //用户浏览量
    const userId = $store.state.userInfo.id // => 用户id
    const readNum = ref(0);
    proxy.$request('put', '/api/v1/user/weekly/browse/' + userId, {
      id: userId
    }).then(res => {
      console.log(res)
      switch (res.code) {
        case 200:
          readNum.value += 1;
          break;
      }
    })

    //获取周报详情内容
    const coTitle = ref(),
        coBody = ref(),
        coTimes = ref(),
        coBrowse = ref(),
        coUsername = ref(),
        coIntroduce = ref(),
        coPortrait = ref(),
        coGrade = ref();
    let coLabel = [];


    proxy.$request('get', 'api/v1/user/weekly/' + router.currentRoute.value.params.id, {}).then(res => {
      console.log(res)
      coTitle.value = res.data.title;
      coBody.value = res.data.content;
      coTimes.value = res.data.create_time;
      coBrowse.value = res.data.browse
      coIntroduce.value = res.data.introduce;
      // coLabel.value=res.data.label;
      // console.log(coLabel.value)
      for (let i=0; i<res.data.label.length; i++){
        coLabel.push(res.data.label[i])
      }
      console.log(coLabel)

      //  分割获取用户名
      if (res.data.username.length >= 6) {
        coUsername.value = res.data.username.slice(2, 5)
        coGrade.value = res.data.username.slice(0,2);
        res.data.coUsername =  coUsername.value
      } else if (res.data.username.length < 6) {
        coUsername.value = res.data.username.slice(2, 4)
        coGrade.value = res.data.username.slice(0,2);
        res.data.coUsername =  coUsername.value
      }
      if (res.data.coUsername.length == 3) {
        res.data.portrait = res.data.coUsername.slice(1, 3)
        coPortrait.value = res.data.portrait
      } else if (res.data.coUsername.length == 2) {
        res.data.portrait = res.data.coUsername
        coPortrait.value = res.data.portrait
      }
      console.log(coPortrait.value)
    })

    return {
      authorData,
      second_author,
      coTitle,
      coBody,
      coTimes,
      coBrowse,
      coUsername,
      coIntroduce,
      coLabel,
      readNum,
      coPortrait,
      coGrade
    }
  }
})
</script>

<style lang="less">
#content {
  display: flex;
  justify-content: center;
  margin-top: 100px;

  .con-body {
    width: 1200px;
    display: flex;
    justify-content: space-between;
    .con-by-left {
      width: 945px;
      min-height: 100vh;
      background-color: #fff;
      padding: 24px;
      margin-bottom: 30px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .by-left-tit {
        h1 {
          font-weight: bold;
          font-size: 32px;
        }
      }

      .by-left-release {
        display: flex;
        justify-content: space-between;
        margin-bottom: 25px;

        .rel-left {
          display: flex;
          .int-author-portrait{
            width: 46px;
            height: 46px;
            background-color: #3C50E1;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-weight: bold;
            margin-right: 5px;
          }
          .rel-aut-body {
            height: 48px;

            p {
              margin: 0;

              span {
                margin: 0 3px;
              }

              span:first-child {
                margin-left: -3px;
              }
            }

            p:first-child {
              margin-bottom: 2px;
              font-weight: bold;
            }

            p:last-child {
              color: #C7C7C7;
            }
          }
        }

        .rel-rigth {
          display: flex;
          flex-wrap: wrap;

          p {
            width: 100%;
            margin: 0;
            color: #C7C7C7;
          }
        }
      }

      .by-left-content {
        width: 100%;
       border-top: 1px solid #F5F5F5;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        p {

        }
      }
      .by-left-classify {
        width: 100%;
        height: 74px;
        display: flex;
        align-items: center;
        border-top: 1px solid #F5F5F5;
        .class-box {
          width: 60px;
          height: 30px;
          background: #F7F8FC;
          border-radius: 6px 6px 6px 6px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: -10px 0 0 10px;

          p {
            color: #6777EF;
            margin: 0;
          }
        }

      }

    }
.con-by-right-slide{
  width: 230px;
  height: 100%;
  .con-by-right {
    width: 230px;
    height: 20%;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: fixed;
    .tit {
      width: 100%;
      display: flex;
      padding: 5px 10px 0 10px;

      .tit-excellent {
        width: 100%;
        height: 40px;
        display: flex;
        margin-left: 10px;
        align-items: center;

        p {
          color: #6777EF;
          font-size: 16px;
          margin: 0;
        }
      }
    }

    .int-author {
      width: 100%;
      background-color: #fff;
      border-top: 2px solid #F5F5F5;
      display: flex;
      flex-wrap: wrap;
      padding-left: 15px;
      align-items: center;
      justify-content: space-between;

      .int-aut-body {
        width: 100%;
        height: 90px;
        margin-left: -17px;
        border-bottom: 2px solid #F5F5F5;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .int-author-portrait{
          width:44px;
          height: 44px;
          background-color: #3C50E1;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-content: center;
          margin-left: 20px;
          p{
            font-size: 12px;
            color: #fff;
            font-weight: bold;
            line-height: 44px;
          }
        }
        .int-author-right {
          width: 70%;
          margin-top: -5px;
          p {
            margin: 9px 0 0 8px;
            font-size: 16px;
            font-weight: bold;
          }

          p:last-child {
            font-size: 12px;
            color: #C7C7C7;
            margin-top: 5px;
            margin-left: 5px;

            span {
              margin: 0 2px;
              font-weight: lighter;
            }
          }

        }
      }

      .int-aut-body:last-child {
        border: none;
      }
    }
  }
}


  }
}
</style>